<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			div#d1{
				width: 1000px;
				height: 50px;
			    background: red;
			}
			div div.c1{
				width: 250px;
				height: 50px;
				background: darkred;
				float: left;
				text-align: left;
				line-height: 50px;
			}
			div div.c1 span{
				color: #ffffff;
				padding: 0 20px;
			}
			div div.c2{
				width: 600px;
				height: 50px;
				float: left;
			}
			div div.c2 ul{
				text-align: center;
				list-style: none;
			}
			div div.c2 ul li{
				float: left;
				padding: 0 20px;
			}
			div div.c2 ul li a{
				text-decoration: none;
				color: #fff;
			}
			 div#d2{
			border: 2px solid red;
			width: 246px;
			height: 300px;
			}
			div#d2 ul{
				padding: 0;
			}
			div#d2 ul li{
				list-style: none;
				padding: 0 30px;
			}
		</style>
	</head>
	<body>
		<hr />
		<div id="d1">
			<div class="c1"><span>全部商品分类</span></div>
			<div class="c2">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">服装城</a></li>
					<li><a href="#">食品</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">夺宝岛</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">金融</a></li>
				</ul>
			</div>
		</div>
		<div id="d2">
			<ul>
			<li>图书、音像、数字商品</li>
			<hr />
			<li>家用电器</li>
			<hr />
			</ul>
		</div>
	</body>
</html>